import { Col, Form, Radio } from 'antd';
import './styles.less';
import { useState, useMemo } from 'react';
import MyIcon from '@/components/MyIcon';

interface RadioTagsAPI {
  data: any[];
  formName: string;
  formLabel: string;
  isRules: boolean;
  defalultKeys?: number;
}

const RadioTags = ({ data, formName, formLabel, isRules = false, defalultKeys }: RadioTagsAPI) => {
  const [selectKeys, setSelectKeys] = useState<string>(defalultKeys || defalultKeys == 0 ? defalultKeys : data?.[0]?.value);
  const onChangeSwitch = (e: any) => {
    const checkKey: string = e?.target?.value;
    setSelectKeys(checkKey);
  };

  const RenderRadio = useMemo(() => {
    return data?.map((item) => {
      return (
        <Radio.Button
          key={item.value}
          value={item.value}
          style={{
            marginRight: '10px',
            position: 'relative',
          }}
        >
          {item?.name}
          {selectKeys == item.value ? (
            <MyIcon
              type="icon-xuanzejiaobiao"
              style={{
                fontSize: '30px',
                position: 'absolute',
                top: '1px',
                right: '-1px',
              }}
            />
          ) : null}
        </Radio.Button>
      );
    });
  }, [selectKeys]);

  return (
    <Col span={8}>
      <Form.Item
        name={formName}
        label={formLabel}
        initialValue={defalultKeys}
        rules={[
          {
            required: isRules,
            message: '请选择' + formLabel,
          },
        ]}
      >
        <Radio.Group style={{ whiteSpace: 'nowrap' }} onChange={onChangeSwitch} defaultValue={defalultKeys}>
          {RenderRadio}
        </Radio.Group>
      </Form.Item>
    </Col>
  );
};

export { RadioTags };
